<template>
	<view class="login">
		<view class="headText">
			你好，<br/>
			欢迎使用湖北新华教育服务平台
		</view>
		<view class="l-tabs">
			<div class="l-tab active">
				新用户注册
				 <img src="../../static/img/loginTab.png" class="tabIcon">
			</div>
		</view>
		<view class="l-con">
			<view class="l-row">
				<view class="l-label"> 
				  <text class="iconfont icon-shouji"></text>
				  <text class="l-l-name">手机号</text>
				</view>
				<view class="l-inputbox">
					<input type="text" class="l-l-input" v-model="form1.username" placeholder="请输入您的手机号">
				</view>
			</view>
			<view class="l-row">
				<view class="l-label"> 
				  <text class="iconfont icon-mima"></text>
				  <text class="l-l-name">验证码</text>
				</view>
				<view class="l-inputbox l-code" >
					<input type="text" class="l-l-input"  v-model="form1.code" placeholder="请输入您的验证码">
					<text class="warring" @tap="getYan" v-show="!set">
						<text>获取验证码</text>
					</text>
					<text class="warring" @tap="getYan" v-show="set">
					    <text>( {{time}} )</text>
					</text>
				</view>
			</view>
			<view class="l-row">
				<view class="l-label"> 
				  <text class="iconfont icon-mima"></text>
				  <text class="l-l-name">设置密码</text>
				</view>
				<view class="l-inputbox">
					<input type="password" class="l-l-input" v-model="form1.password" placeholder="请输入您设置的密码8-16位字母数字">
				</view>
			</view>
			<view class="forgetBox">
				<view class="forget-i pull-right">已有账号？<text class="warring" @tap="goLogin">登录></text></view>
			</view>
			<view class="btBox">
				<view class="bt bt-a" @tap="submit">注 册</view>
			</view>
		</view>
	</view>
</template>

<script>
	var Phone = /^[1][3,4,5,7,8,9][0-9]{9}$/;
	var Ma = /^[a-zA-Z0-9]{8,16}$/;
	import mixin from '@/util/mixin.js';
	import baseUrl from "@/util/path.js"
	export default {
		mixins: [mixin],
		data() {
			return {
				tab:0,
				form1:{
					username:"",
					password:"",
					code:""
				},
				tab:0,
				set:false,
				time:60,
				str:'获取验证码'
			}
		},
		methods: {
			goLogin() {
				uni.navigateTo({
				   url:"/pages/login/login"
				})
			},
			submit() {
				
			},
			getYan() {
				// console.log(this.form1.username);
				if(!Phone.test(this.form1.username)) {
					this.toast("请输入正确的手机号");
					return
				}
				const _this = this;
				uni.request({
					url: baseUrl.lb + 'send_mobile_code',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'get',
					data:{
						user_mobile:_this.form1.username,
						type:1
					},
					success: (res) => {
						debugger;
						console.log(res);
						if(res.data.code == 200) {
							_this.satrtTime();
						} else {
							_this.toast(res.data.message)
						}
					},
					fail: (err) => {
						debugger;
					}
				})
			},
			satrtTime(){
				const _this = this;
				this.set = true;
				 let Ontime =  setInterval(function () {
					_this.time --;
					if(_this.time == 0) {
						clearInterval(Ontime);
						_this.set = false;
						_this.time = 60;
					}
			    },1000)
			},
			submit(){
				const _this = this;
				if(!Phone.test(this.form1.username)) {
					this.toast("请输入正确的手机号");
					return
				}
				if(!this.form1.code) {
					this.toast("请输入验证码");
					return
				}
				if(!Ma.test(this.form1.password)) {
					this.toast("请输入密码8-16位字母符号");
					return
				}
				uni.request({
					url: baseUrl.lb + 'api/register/register',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'post',
					data:{
						user_mobile:this.form1.username,
						...this.form1
					},
					success: (res) => {
						console.log(res);
						debugger;
						if(res.data.code == 200) {
							_this.toast("注册成功");
							_this.set = false;
							_this.time = 60;
							_this.form1 = {
								username:"",
								password:"",
								code:""
							}
							//uni.setStorageSync('token',res.data.access_token);
							uni.navigateTo({
							   url:"/pages/login/login"
							})
						} else {
							_this.toast(res.data.message);
						}	
					},
					fail: (err) => {
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pull-left {
		float: left;
	}
	.pull-right {
		float:right;
	}
	.uni-input-placeholder {
		color:#b3b3b3;
	}
	.login {
		height: 100%;
		width: 100%;
		background-image: url('../../static/img/login-bg.jpg');
		// background-color: #f7624f;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
   .headText {
	   	color:#fff;
		padding: 96rpx 0rpx 11rpx;
		font-size: 40rpx;
		line-height: 1.8;
		font-weight: 550;
		width: 568rpx;
		margin: 0 auto;
   }
   .l-tabs {
	   width: 100%;
	   display: flex;
	   .l-tab {
		   width: 50%;
		   opacity: 0.6;
		   height: 110rpx;
		   text-align: center;
		   line-height: 110rpx;
		   color:#fff;
		   font-size: 32rpx;
		   position: relative;
		   .tabIcon {
		   			   position: absolute;
		   			   bottom: -2rpx;
		   			   left: 50%;
		   			   margin-left: -31rpx;
		   			   width: 62rpx;
		   			   height: 26rpx;
		   }
		   &.active {
			   opacity: 1;
		   }
	   }
   }
   .l-con {
	   background-color: #fff;
	   border-radius: 56rpx;
	   padding: 22rpx 62rpx 44rpx;
	   .l-label {
		   margin-bottom: 18rpx;
	   }
	   .l-row {
		   padding-top: 40rpx;
		   .l-l-name {
			   font-size: 36rpx;
			   position: relative;
			   top:-4rpx;
		   }
		   .iconfont {
			   color:$color-primary;
			   font-size: 48rpx;
			   margin-right: 20rpx;
		   }
	   }
	   .l-inputbox {
		   padding: 22rpx 0;
		   border-bottom: 1px solid #e6e6e6;
		   &.l-code {
			    display: flex;
				justify-content: space-between;
				.warring {
					color:#f24545;
				}
			  .l-l-input {
			  	width: 260rpx;		   
			  } 
		   }
		   .l-l-input {
			   
		   }
	   }
	   .forgetBox {
		   width: 100%;
		   overflow: hidden;
		   padding-top: 35rpx;
		   .forget-i {
			   flex:none;
			   .warring {
				   color:#f24545;
			   }
		   }
	   }
	   .btBox {
		      padding-top: 170rpx;
		   .bt.bt-a {
			  font-size: 36rpx;
			  background-color: #fff;
			  border:1px solid transparent;
			  background-image: linear-gradient(to right, #ff947b, #f34a48)
		   }
		   @include bt-s-1();
	   }
   }
</style>
